<template>
  <div ref="chart" style="width: 100%; height: 500px"></div>
</template>
<script>
// 引入echarts
import * as echarts from "echarts";
import { onMounted } from "vue";
import { reactive, ref, toRefs } from "vue";
import {
  UsergroupAddOutlined,
  PartitionOutlined,
  HistoryOutlined,
} from "@ant-design/icons-vue";

export default {
  name: "lineChart",
  props: {
    list: {
      type: Array,
      default: [],
    },
  },
  components: {
    UsergroupAddOutlined,
    PartitionOutlined,
    HistoryOutlined,
  },
  setup(props) {
    const { chartTitle, list, color } = toRefs(props);
    const state = reactive({
      //创建响应式数据对象和相关数据
      id: ref(Date.now()),
      chart: ref(),
      data: ref([]),
    });
    const init = () => {
      //定义方法
      if (state.chart) {
        //图标初始化
        var myChart = echarts.init(state.chart);
        const option = {
          title: {
            text: "撮合交易总量情况",
            left: "center",
          },
          toolbox: {
            left: "80%",
            show: true,
            feature: {
              mark: { show: true },
              dataView: { show: true, readOnly: false, title: "查看源数据" },
              saveAsImage: { show: true, title: "另存为图片" },
            },
          },
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)",
          },
          xAxis: {
            boundaryGap: false,
            type: "category",
            data: Array.from(Array(24), (v, k) => k),
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              data: list.value.tradingVolumes,
              type: "line",
            },
          ],
        };
        //指定配置项与数据显示
        myChart.setOption(option);
      }
    };
    // 生命周期函数
    onMounted(() => {
      init();
    });
    return state;
  },
};
</script>
<style>
</style>